﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>基础框架平台服务前端预览中心-数据服务</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet"/>
    <link href="bootstrap/css/bootstrap-table.css" rel="stylesheet"/>
    <link href="bootstrap/css/bootstrap-table-fixed-columns.css" rel="stylesheet"/>
    <link href="bootstrap/css/bootstrap-editable.css" rel="stylesheet"/>
    <link href="bootstrap/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
    <link href="css/docs.css" rel="stylesheet"/>
    <link href="css/pygments-manni.css" rel="stylesheet"/>
    <style>
        .fixed-table-body{
            max-height: calc(100vh
            - 285px
            );
        }
    </style>

</head>
<body style="background-color: #F1F3FA;">
<nav class="navbar navbar-default" style="margin-top:5px; margin-bottom:15px;">
    <div class="container-fluid">
        <div class="navbar-header" style="font-size:16px; padding-top:8px;">
            <span style="font-size: 23px; border: solid 1px #DDDDDD; padding:0px 5px; margin-right:25px; float:left;">聚合查询服务</span>
            <span id="sp_seviceUrl" style="float:left; padding-top:6px; font-size:15px;"></span>
        </div>
    </div>
</nav>
<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">表格预览</a></li>
    <li role="presentation"><a href="#serviceAPI" aria-controls="profile" role="tab" data-toggle="tab">服务调用API</a></li>
    <li role="presentation"><a href="#serviceInformationAPI" aria-controls="profile" role="tab" data-toggle="tab">服务配置API</a></li>

</ul>
<!-- Tab panes -->
<div class="tab-content">
    <div role="tabpanel" class="tab-pane fade in active " id="home">
        <div class="panel panel-primary">
            <div class="panel-heading">表格视图</div>
            <div id="tb_content" class="panel-body" style="overflow-x:scroll;">
                <div class="container-fluid">
                    <div id="toolbar" class="form-inline">
                        <div id="txtSearch" class="form-group">
                        </div>
                        <button id="btn_search" type="button" class="btn btn-success">查询</button>
                    </div>
                    <table id="tb_list"></table>
                </div>
            </div>
        </div>

    </div>


    <div role="tabpanel" class="tab-pane fade " id="serviceInformationAPI">
        <div class="panel panel-primary">
            <div class="panel-heading">服务信息API</div>
            <div id="tb_data" class="panel-body">
                <h4>响应数据列字段信息</h4>
                <div class="bs-callout bs-callout-warning">
                    <h4>服务地址</h4>
                    <p id="polymerServerShowField" >
                        <a href=""  target="_blank"><span class="p_url"></span></a>
                    </p>
                </div>
                <div class="bs-callout bs-callout-info">
                    <h4>参数说明</h4>
                    <table id="tb_field"></table>
                </div>


                <h4>请求条件列字段信息</h4>
                <div class="bs-callout bs-callout-warning">
                    <h4>服务地址</h4>
                    <p id="polymerServerQueryField" >
                        <a href=""  target="_blank"><span class="p_url"></span></a>
                    </p>
                </div>
                <div class="bs-callout bs-callout-info">
                    <h4>参数说明</h4>
                    <table id="tb_fieldCondition"></table>
                </div>

            </div>
        </div>
    </div>


    <div role="tabpanel" class="tab-pane fade " id="serviceAPI">
        <div class="panel panel-primary">
            <div class="panel-heading">数据服务API</div>
            <div id="tb_data" class="panel-body">
                <h4>分页查询数据服务</h4>
                <div class="bs-callout bs-callout-warning">
                    <h4>服务地址</h4>
                    <p id="polymerServerPreview">
                        <a href="" target="_blank"><span class="p_url"></span></a>
                    </p>
                </div>
                <div class="bs-callout bs-callout-info">
                    <h4>参数说明</h4>
                    <table class="table table-bordered table-striped js-options-table">
                        <thead>
                        <tr>
                            <th width="15%" >名称</th>
                            <th width="5%">类型</th>
                            <th width="30%">说明</th>
                            <th width="50%">输入参数值</th>
                        </tr>
                        </thead>
                        <tbody id="inputParameterList">
                        <tr>
                            <td>serviceID</td>
                            <td>String</td>
                            <td>服务ID</td>
                            <td>
                                <input type="text" id="input_serviceId" style="width:100%" ></input>
                            </td>
                        </tr>
                        <tr>
                            <td>AppCode</td>
                            <td>String</td>
                            <td>调用方AppCode</td>
                            <td>
                                <select id="input_appCode" class="form-control input-inline input-medium">
                                    <option value="">请选择调用方</option>
                                    <option :value="item.code" v-for="item in dic.appCodeDic">{{item.name}}</option>
                                </select>
<!--                                <input type="text" id="input_appCode" style="width:100%"></input>-->
                            </td>
                        </tr>
                        <tr>
                            <td>pageNO</td>
                            <td>int</td>
                            <td>当前页数,从1开始(默认值1)</td>
                            <td>
                                <input type="text" id="input_pageNO" style="width:100%"></input>
                            </td>
                        </tr>
                        <tr>
                            <td>pageSize</td>
                            <td>int</td>
                            <td>页大小(默认值10)</td>
                            <td>
                                <input type="text" id="input_pageSize" style="width:100%"></input>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>


                <div class="bs-callout bs-callout-info">
                    <button id="btn_executeBusinessService">模拟请求</button>
                </div>


                <div class="bs-callout bs-callout-info">
                    <h4>模拟请求的完整URL地址</h4>
                    <p id="completeUrl"></p>

                    <h4>模拟请求的代码</h4>

                    <figure class="highlight">
                        <pre>
                            <code class="language-js" data-lang="js" id="generateJsCode"></code>
                        </pre>
                    </figure>

                    <h4>模拟请求的执行结果</h4>
                    <pre id="displayJsCodeResponse"></pre>

                </div>



            </div>
        </div>
    </div>
</div>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/js/bootstrap-table.min.js"></script>
<script src="bootstrap/js/bootstrap-table-zh-CN.js"></script>
<script src="bootstrap/js/bootbox.min.js"></script>
<script src="bootstrap/js/bootstrap-datetimepicker.min.js"></script>
<script src="bootstrap/js/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="js/services/serviceConfig.js"></script>
<script src="js/services/polymerServices.js"></script>
<script src="js/docs.js"></script>
<script src="../metronic/assets/vue/vue@2.js" type="text/javascript"></script>
<script type="application/javascript">

    var app = new Vue({
        el: '#serviceAPI',
        data: {
            dic: {
                appCodeDic: [
                    {code: '',name :''},
                ]
            },
        },
        computed: {},

        created: function () {
        },

        mounted: function () {
            var _this = this;
            var Request = GetRequest();
            //this.dic.appCodeDic=[];
            $.ajax({
                type: 'POST',
                url: postPath + '/accesscontrol/appserviceaccessconfig/getDataList',
                data: {serviceId: Request["serviceID"]},
                success: function (res) {

                    var newArr = [];
                    if (res && res.data) {
                        for (var i = 0; i < res.data.length; i++) {
                            newArr.push({code: res.data[i].appCode, name: res.data[i].appCode});
                        }
                    }
                    _this.dic.appCodeDic = newArr;
                }
            });

        },
        methods: {

        }

    });
</script>

</body>
</html>
